<template>
  <div>
    <div class="locate-map" id="locate-map"></div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="1">
        <template slot="title"> <span class="title"> 地图定位 </span> </template>
        <el-row :gutter="10" style="padding: 10px">
          <el-col :span="14"
            ><div class="">
              <el-input
                v-model="lonAndLat"
                placeholder="eg:120,30"
                @keyup.enter.native="handleLocate()"
              >
                <template slot="prepend">经纬度：</template>
              </el-input>
            </div></el-col
          >
          <el-col :span="5"
            ><div class="">
              <el-button type="primary" round @click="handleLocate()">定位</el-button>
            </div></el-col
          >
          <el-col :span="5"
            ><div class="">
              <el-button type="danger" round @click="handleClear()">清除</el-button>
            </div></el-col
          >
        </el-row>
        <!-- <el-row :gutter="10" style="padding: 10px">
          <el-col :span="14"
            ><div class="">
              <el-input v-model="lonAndLat" placeholder="eg:[[120,30]]" @keyup.enter.native="handleLocate()">
                <template slot="prepend">经纬度数组：</template>
              </el-input>
            </div></el-col
          >
          <el-col :span="5"
            ><div class="">
              <el-button type="primary" round @click="handleLocate()">定位</el-button>
            </div></el-col
          >
          <el-col :span="5"
            ><div class="">
              <el-button type="danger" round @click="handleClear()">清除</el-button>
            </div></el-col
          >
        </el-row> -->
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  name: "Locate", //经纬度定位
  data() {
    return {
      map: null,
      activeNames: ["1"],
      lonAndLat: "",
      mousemoveFunc: null,
    };
  },
  mounted() {
    this.initMap();
    this.mousemoveFunc = this.map.mapMouseMove();
    addEventListener("mousemove", this.mousemoveFunc);
  },
  beforeDestroy() {
    // 销毁地图实例
    this.map = null;
    // 移除鼠标移动事件
    removeEventListener("mousemove", this.mousemoveFunc);
    const findDivInterval = setInterval(() => {
      if (document.querySelector("#locateDiv")) {
        document.querySelector("#locateDiv").remove();
        clearInterval(findDivInterval);
      }
    }, 500);
  },
  methods: {
    initMap() {
      this.map = new this.ScreenMap();
      const mapTargetId = "locate-map";
      const baseLayers = [
        this.map.createBaseLayer("tdtImg"),
        this.map.createBaseLayer("tdtImgTxt"),
        this.map.createBaseLayer("zjGeoJson"),
      ];
      // 初始化地图
      this.map.init(mapTargetId, baseLayers);
    },

    handleChange(val) {
      console.log(val);
    },
    handleLocate() {
      if (!this.lonAndLat) {
        this.$message.warning("请输入经纬度");
        return;
      }
      if (!this.lonAndLat.includes(",")) {
        this.$message.warning("请使用英文逗号分隔经纬度！");
        this.lonAndLat = "";
        return;
      }
      let longitude = parseFloat(this.lonAndLat.split(",")[0]);
      let latitude = parseFloat(this.lonAndLat.split(",")[1]);
      this.map.removeLayers();
      this.map.addLayers([this.map.createPointsLayer("point", [[longitude, latitude]])]);
      this.map.locate(longitude, latitude);
    },
    handleClear() {
      this.lonAndLat = "";
      this.map.removeLayers();
    },
  },
};
</script>
<style lang="scss" scoped>
.locate-map {
  width: 100%;
  height: calc(100vh - 84px);
}

::v-deep {
  .el-collapse {
    position: absolute;
    top: 30px;
    left: 30px;
    transition: all 0.4s;
    .title {
      margin: 0 10px;
      font-size: 18px;
    }
  }
}
</style>
